<template>
  <div class="bar path-el-list">
    <span class="path-el-list-item" v-for="item in items" :key="item.uri">
      <span
        class="path-el-list-item-inner"
        :title="formatItemTitle(item)"
        @click="handleClickItem(item)"
      >
        {{ item.name }}
      </span>
      <span class="path-el-list-item-slash"> / </span>
    </span>
  </div>
</template>
  
<script>
import GetterJS from "@/js/getter";

export default {
  name: "files-path-bar",

  computed: {
    items() {
      let vo = this.modelValue;
      let g = GetterJS.NewGetter(vo);
      let elements = g.Get("fquery.location.elements", ".", []);
      let mask = g.Get("fquery.location.mask", ".", 0);
      let host = g.Get("fquery.location.host", ".", -1);
      let count = elements.length;
      let dst = [];
      for (let i = mask; i < count; i++) {
        let index = i;
        let item = this.makeItem({ index, elements, mask, host });
        dst.push(item);
      }
      return dst;
    },
  },

  data() {
    return {};
  },

  methods: {
    makeItem({ index, elements, mask, host }) {
      let uri = this.makeItemURI({ index, elements, mask, host });
      let name = elements[index];
      let is_mask = index < mask;
      let item = { name, uri, is_mask };
      return item;
    },

    makeItemURI({ index, elements, host }) {
      let str = "";
      for (let i = 0; i <= index; i++) {
        let sep = "/";
        let name = elements[i];
        if (i == 0) {
          sep = "";
        } else if (i == host) {
          sep = "//";
        }
        str = str + sep + name;
      }
      return str;
    },

    formatItemTitle(item) {
      let str = JSON.stringify(item);
      return str;
    },

    handleClickItem(item) {
      let location = item.uri;
      let action = "navigate";
      this.$emit("action", { action, location });
    },
  },

  mounted() {},

  unmounted() {},

  props: {
    modelValue: Object,
  },
};
</script>
  
<style scoped>
.path-el-list {
  background-color: rgb(218, 218, 218);
  padding: 13px;
  margin: 3px;
  text-align: left;
}

.path-el-list-item {
  margin: 1px;
}

.path-el-list-item-slash {
  color: rgb(173, 173, 173);
  font-size: 25px;
}

.path-el-list-item-inner {
  padding: 5px;
  margin: 2px;
  border-radius: 3px 3px;
  cursor: pointer;
  color: rgb(68, 68, 68);
  font-size: 16px;
}

.path-el-list-item-inner:hover {
  background-color: rgb(250, 250, 250);
}
</style>
